<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>过滤选择器-基本过滤器</title>
<script type="text/javascript" src="js/jquery-1.5.js"></script>
<script type="text/javascript">
	$(function() {
		//1.first()	获取匹配的第一个元素
		//$("li").first().css("backgroundColor","lightblue");
		$("li:first").css("backgroundColor","lightblue");
		//last() 获取匹配的最后个元素
		//2.$("li").last().css("backgroundColor","lightblue");
		$("li:last").css("backgroundColor","lightblue");
		//3.:not(selector) 去除所有与给定选择器匹配的元素
		$("input:not('#flower')").val("OK");
		//4.:even 匹配所有索引值为偶数的元素，从 0 开始计数
		$("tr:even").css("backgroundColor","lightblue");
		//5.:odd 匹配所有索引值为奇数的元素，从 0 开始计数
		$("tr:odd").css("backgroundColor","lightgray");
		//6.:eq 匹配一个给定索引值的元素
		$("tr:eq(1)").html("<td>value</td>");
		//7.:gt 匹配所有大于给定索引值的元素
		$("tr:gt(1)").css("backgroundColor","yellow");
		//8.:lt 匹配所有小于给定索引值的元素
		$("tr:lt(1)").css("backgroundColor","yellow");
		//9.:header 匹配如 h1, h2, h3之类的标题元素
		$(":header").css("background", "#EEE");
		//10.:animated 匹配所有正在执行动画效果的元素
		$("#run").click(function(){
		  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
		});

	});
</script>
</head>
<body>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<input name="apple" />
<input id="flower" checked="checked" />
<br/>
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
<button id="run">Run</button><div></div>
</body>
</html>